<template>
    <el-carousel height="100%" 
    :autoplay="true" 
    trigger="click" 
    :interval="5000" 
    :class="nofit ? 'nofit':''"  
    class="loading-area">
        <el-carousel-item height="100%"  v-for="item in imgList" :key="item.id" :class="showPic? '':'opacity-0'">
            <img v-lazy="item.imgUrl?item.imgUrl:'@/assets/img/img_01.jpg'"/>
        </el-carousel-item>
       
    </el-carousel>  
</template>

<script>
 export default {
     name:'hyCarousel',
     props:{
         imgList:{
             type:Array,
             default:()=>[]
         },
         nofit:{
             type:Boolean,
             default:false
         },
         showPic:{
             type:Boolean,
             default:false
         }
     },
     data () {
         return {

         }
     },
     methods:{
     }
 }
</script>

<style scoped lang="scss">
.el-carousel{
    width:100%;
    height:82%;
    margin:0 auto;
}
.el-carousel__container{
    height:100% !important;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}
  
.el-carousel__item:nth-child(2n) {
    background-color: #f3f7f6;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #f3f7f6;
}

.el-carousel__item img{
    width:100%;
    height:100%;
}
.nofit .el-carousel__item img{
    width:auto;
    height:100%;
}
.carousel-img{
    width:100%;
    height:100%;
    background-size:cover;
}
.nofit .carousel-img{
    background-size:contain;
}
 @media screen and (max-width: 800px) {
  .isMobile{
    .el-carousel{
        height:150px;
    }
  }
  
} 
</style>
